<template>
    <div class="logistics-management">
      <!-- 顶部按钮组 -->
      <el-button-group>
        <el-button>批量操作</el-button>
        <el-button>导入</el-button>
        <el-button>导出</el-button>
        <el-button>打印</el-button>
      </el-button-group>

       <!-- 状态标签 -->
       <el-tabs v-model="searchForm.pickupStatus"  @tab-click="onSearch"> <!--  -->
          <el-tab-pane label="全部" name=""></el-tab-pane>
          <el-tab-pane label="待提货" name="2"></el-tab-pane>
          <el-tab-pane label="已提货" name="3"></el-tab-pane>
        </el-tabs>
      <!-- 搜索栏 -->
      <el-form :inline="true"  class="demo-form-inline">    <!-- :model="searchForm" -->
        <el-form-item label="始发地" >
          <el-cascader v-model="searchForm.originList"
            :options="originOptions"
            :props="props"
            clearable
            placeholder="请选择始发地">
          </el-cascader>
        </el-form-item>
        <el-form-item label="目的地" >
          <el-cascader v-model="searchForm.destinationList"
            :options="originOptions"
            :props="props"
            clearable
            placeholder="请选择始发地">
          </el-cascader>
        </el-form-item>
        <el-form-item label="提货日期">
          <el-date-picker   
           v-model="searchForm.pickupTimeList"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input  placeholder="请输入关键词搜索" clearable v-model="searchForm.keyword" ></el-input> <!--  -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 数据表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" >
        </el-table-column>
        <el-table-column label="操作" width="280px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">提货</el-button>
            <el-button size="mini" @click="handleStart(scope.row)">发车</el-button>
            <el-button size="mini" @click="handleArrival(scope.row)">到站</el-button>
            <el-button size="mini" @click="handleDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>

        <el-table-column prop="id" label="提货单号" width="180px">
        </el-table-column>
        <el-table-column prop="waybillId" label="运单号" width="180px">
        </el-table-column>
        <el-table-column prop="orderId" label="订单号" width="180px">
        </el-table-column>
        <el-table-column prop="name" label="客户" width="180px"></el-table-column>
        <el-table-column label="始发地" width="130px">
          <template slot-scope="scope">
            <div>
           <span>{{ scope.row.name1 }}</span>/
           <span> {{ scope.row.name2 }}</span> 
            </div>
            </template>
        </el-table-column>
        <el-table-column label="目的地" width="130px" >
          <template slot-scope="scope">
            <div>
           <span>{{ scope.row.name3 }}</span>/
           <span> {{ scope.row.name4 }}</span> 
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="pickupStatus" label="提货状态">
              <template slot-scope="scope">
                    {{scope.row.pickupStatus == 2?'待提货':
                    (scope.row.pickupStatus == 3?'已提货':'未知状态')}}
              </template>
        </el-table-column>
        <el-table-column prop="faHuoAddress" label="发货地址" width="200px"></el-table-column>
        <el-table-column prop="customerAddress" label="收货地址" width="250px"></el-table-column>
        <el-table-column prop="driverName" label="司机"></el-table-column>
        <el-table-column prop="licensePlate" label="车牌号码"></el-table-column>
        <el-table-column prop="contact" label="手机号码" width="110px"></el-table-column>
        <el-table-column prop="goodsCount" label="提货数量"></el-table-column>
        <el-table-column prop="allVolume" label="提货体积(m³)" width="110px"></el-table-column>
        <el-table-column prop="allWeight" label="提货重量(kg)" width="130px"></el-table-column>
        <el-table-column prop="totalFee" label="提货运费合集(元)" width="130px"></el-table-column>
        <el-table-column prop="pickupTime" label="提货时间" width="150px"></el-table-column>
        <el-table-column prop="planDepartureTime" label="计划发车时间" width="150px"></el-table-column>
        <el-table-column prop="actualDepartureTime" label="实际发车时间"  width="150px"></el-table-column>
        <el-table-column prop="planArrivalTime" label="计划到达时间"  width="150px"></el-table-column>
        <el-table-column prop="actualArrivalTime" label="实际到达时间"  width="150px"></el-table-column>
        <!-- <el-table-column prop="realName" label="创建人"></el-table-column> -->
        <el-table-column prop="createdTime" label="创建时间" width="150px"></el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          background
          :page-sizes="[3, 5, 7 , 10 , 20]"
          :page-size="pageSize"
          :current-page="pageNum"
          layout=" total,sizes,prev, pager, next,jumper"
          :total="total"
          @next-click="nextPage"
          @prev-click="prevPage"
          @current-change="changePage"
          @size-change="sizeChange">
      </el-pagination>

   
    

    </div>
  </template>
  
  <script>
  export default {
    name: 'LogisticsManagement',
    data() {
      return {
        searchForm: {
          pickupStatus:'',
        
        },
        
        originOptions: [ ],
        props: { value:'id',label:'name',children:'cityList' },  //配置级联选择器多选
        tableData: [], // 这里需要填充实际的数据
        pageSize: 7,
        total: 0,
        pageNum:1,
      }
    },
    methods: {
      
      handleStart(val){//发车
        this.$axios.get("/api/pickupOrder/handleStart/"+val.id)
        .then( resp =>{ 
            console.log(resp.data)
            if(resp.data.code==200){
              this.$message({
                  type: 'success',
                  message: '发车成功'
                  });
               this.onSearch()   
            }
            if(resp.data.code==2010){
              this.$message({
               type: 'warning',
                  message: '不能操作发车'
                  });
            }
            
          })

      },
      handleArrival(val){ //到站
        this.$axios.get("/api/pickupOrder/arrival/"+val.id)
        .then( resp =>{ 
            console.log(resp.data)
            if(resp.data.code==200){
              this.$message({
                  type: 'success',
                  message: '车到站了'
                  });
               this.onSearch()   
            }
            if(resp.data.code==2010){
              this.$message({
               type: 'warning',
                  message: '不能操作到站'
                  });
            }
          })
      },
      handleEdit(val){  //提货按钮
        this.$axios.get("/api/pickupOrder/tiHuo/"+val.id)
          .then( resp =>{ 
            console.log(resp.data)
            if(resp.data.code==2010){
              this.$message({
                  type: 'warning',
                  message: '不能提货'
              });      
            }
            if(resp.data.code==200){
              this.$message({
                  type: 'success',
                  message: '提货成功'
                  });
               this.onSearch()   
            }
            
          })
      },
      onSearch() {
        // 实现搜索逻辑
        let pageParam = {};
        pageParam.pageNum = this.pageNum;
        pageParam.pageSize = this.pageSize;
        pageParam.param = this.searchForm;
        this.$axios.post("/api/pickupOrder/queryPickupOrder",pageParam)
            .then(resp =>{
              console.log(resp.data)
              if(resp.data.code==200){
                //给数据tableData赋值
                this.tableData =resp.data.data.list
                //给分页总数赋值
                this.total = resp.data.data.total
            }
            })
      },
      queryOrigin(){
        //查询所有始发地
        this.$axios.get("/api/provincial/queryProvincial")
            .then(resp =>{
              console.log(resp.data)
              if(resp.data.code==200){
                this.originOptions = resp.data.data
              }
            })
      },

      onReset() {
        // 重置搜索表单
        this.searchForm = {
          pickupStatus:'',
        }
        this.onSearch()
      },
      handleDetail(val) {
        // 查看详情操作
         // 将整行数据存储到 localStorage
        // localStorage.setItem('waybillDetails', JSON.stringify(row));
        // 导航到详情页面，只传递 ID
        this.$router.push({ path: '/details', query: { 'waybillId': val.waybillId } })
         // 导航到详情页面，只传递 ID
        // this.$router.push({ name: 'WaybillDetail', params: { id: row.id } });
      },


    nextPage(val){   //val 当前页 方法自动获取当前页
              //下一页  获取当前页pageNum
              this.pageNum= val;
              this.onSearch();
          },
    prevPage(val){
        //下一页
        this.pageNum= val;
        this.onSearch();
    },
    changePage(val){
        //当前页
        this.pageNum= val;
        this.onSearch();
    },
    sizeChange(val){
        //下拉框  每页条数
        this.pageSize= val;
        this.pageNum=1;
        this.onSearch();
    }

    },
    created() {
      this.onSearch()
      this.queryOrigin()
    },
  }
  </script>
  
  <style scoped>
  .logistics-management {
    padding: 20px;
  }
  </style>